<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Regions: Remove element sibling from named flow on CSS hover</title>
	<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
	<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
	<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
	<meta name="assert" content="Changing the flow-into property should be possible in rules that use the :hover pseudoclass">
	<meta name="flags" content="interact ahem">
	<style>
	p {
		margin: 0;
	}
	.box {
		float: left;
		width: 100px;
		height: 200px;
		margin: 10px;
	}
	#content {
		background-color: lightgray;
		font-family: Ahem;
		font-size: 20px;
		line-height: 1em;
	}
	#content p {
		flow-into: f;
	}
	#content p:first-child {
		color: lightblue;
	}
	#content p:first-child:hover + p {
		flow-into: none;	
	}
	#region {
		flow-from: f;
	}
	#region p {
		width: 100%;
		height: 50%;
		background-color: red;
	}
	</style>
</head>
<body>
	You should not see any red before or during this test.
	<ol>
		<li>You should see a tall gray rectangle alongside with a blue and a black square</li>
		<li>Move the mouse over the blue square.</li>
		<li>The black square below the blue square should appear in the gray rectangle on the left.</li>
	</ol>
	<div id="content" class="box">
		<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
		<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
	</div>
	<div id="region" class="box">
		<p></p>
	</div>
</body>
</html>